<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Business Decision Service</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
        <style>
            .el-header {
                background-color: #B3C0D1;
                color: #333;
                line-height: 60px;
            }

            .el-aside {
                color: #333;
            }
            .el-menu-item, .el-submenu__title
            {
                height:36px;/*old value is 56px*/
                line-height: 36px;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <el-container style="border: 1px solid #eee">
                <el-header>
                    当前项目：
                    <el-select v-model="currentproject" placeholder="请选择项目" clearable>
                        <el-option v-for="item in projectDropDownList" :value='item.rpath' :label='item.rname' :key="item.rpath">
                        </el-option>
                    </el-select>
                    <!--<el-link @click="handleMenuClick(componentList.find(it=>it.rtype==='project'))">管理</el-link> -->
                    <el-link @click="handleMenuClick({rtype:'project',rname:'项目管理',homepage:'/rule/projecthome.htm'})">管理</el-link>

                    <span style='display: inline-block; width: 120px;'></span>
                    <span style="font-size: x-large;">恒昌业务决策服务</span>
                    <span style="float: right; padding: 3px 0">
                        <span v-if='funcList.length' style="margin-left: 10px;">
                            <el-dropdown size='large' type="primary" @command="handleFuncOperate">
                                <span class="el-dropdown-link">
                                    <i class="el-icon-s-grid" style="font-size: medium;">系统功能</i>
                                    <i class="el-icon-arrow-down el-icon--left"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown" style="opacity: 0.8;">
                                    <el-dropdown-item v-for='func in funcList' :key='func.url' :command='func' @command="handleFuncOperate">{{func.title}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </span>
                        <span style="margin-left: 20px;">
                            <el-dropdown size='large' type="primary" @command="handleUserOperate">
                                <i class="el-icon-user-solid" style="font-size: large;min-width:60px">{{user.name}}</i><i class="el-icon-arrow-down el-icon--left"></i>
                                <el-dropdown-menu slot="dropdown" style="opacity: 0.8;">
                                    <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
                                    <el-dropdown-item command='changePwd'>修改密码</el-dropdown-item>
                                    <el-dropdown-item command='login'>切换用户</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </span>
                    </span>
                </el-header>
                <el-container>
                    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                        <el-menu :default-openeds="['1']" unique-opened>
                            <template v-for="item in componentList">
                                <el-menu-item v-if="item.rtype !=='project'" v-bind:index="item.rtype" @click='handleMenuClick(item)'>
                                    {{item.rname}}
                                    <a v-if='development' v-bind:href="item.homepage.replace('${rtype}',item.rtype)"
                                        target="mainframe">
                                        link
                                    </a>
                                </el-menu-item>
                            </template>
                        </el-menu>
                    </el-aside>
                    <el-main style='padding: 0px;'>
                        <el-tabs v-model="workbench.activePageUrl" type="border-card" closable @tab-remove="handleTabRemove">
                            <el-tab-pane v-for="(item, index) in workbench.pageList" :key="item.url" :label="item.title"
                                :name="item.url">
                                <iframe :id="item.url" :name="item.url" width=100% height=1080px :src="item.url"
                                    frameborder="0" border="0" marginwidth="0" marginheight="0" allowtransparency="yes"
                                    :onload="handleIframeLoad(item)">
                                </iframe>
                            </el-tab-pane>
                        </el-tabs>
                    </el-main>
                </el-container>
            </el-container>
        </div>

        <script type='module'>
            import * as $util from './lib/hc-util.js'
            import * as $rest from './lib/hc-rest-service.js'

            function handleMenuClick(item) {
                if(!vm.currentproject && item.rtype !== 'project')
                {
                    $workbench.openPage({
                        url: './docs/quickstart.html',
                        title: '快速开始',
                    });
                    vm.$message({type:'warning',message:'请先切换或创建新项目，然后再管理和操作所在项目的各类组件。'});
                    return ;
                }
                $workbench.openPage({
                    url: item.homepage.replace('${rtype}', encodeURI(item.rtype)),
                    title: item.rname,
                    tag: "rtype@" + item.rtype,
                });
            }
            
            window.$workbench = {
                pageList: [],
                activePageUrl: null,
                reset:function()
                {
                    this.pageList.splice(0,this.pageList.length);
                    let welcome = {
                        title: '首页',
                        url: 'welcome.htm',
                     };
                    this.pageList.push(welcome);
                    this.activePageUrl = welcome.url;
                },
                
                openPage: function(page, forceRefresh = false) {
                    if (this.pageList.find(it => it.url === page.url)) {
                        this.activePageUrl = page.url;
                        if (forceRefresh) {
                            document.getElementById(page.url).contentWindow.location.reload(true);
                        }
                        return;
                    };
                    if(!page.tag) page.tag = page.url;
                    this.pageList.push(page);
                    this.activePageUrl = page.url;
                },

                refreshPage: function(urlOrTag) {
                    let page = this.pageList.find(it => it.url === urlOrTag || it.tag === urlOrTag);
                    if (!page) {
                        console.log('the page does not exists when refresh the page of ', urlOrTag);
                        return false;
                    }
                    document.getElementById(page.url).contentWindow.location.reload(true);
                },

                closePage: function(urlOrTag) {
                    let index = this.pageList.findIndex(it => it.url === urlOrTag || it.tag === urlOrTag);
                    if (index < 0) {
                        console.error('the page does not exists when closing the page of ', urlOrTag);
                        return;
                    };

                    let item = this.pageList[index];

                    this.pageList.splice(index, 1);

                    if (this.activePageUrl === item.url) {
                        if (index >= this.pageList.length) index = this.pageList.length - 1;

                        this.activePageUrl = index >= 0 ? this.pageList[index].url : null;
                    };
                },
            };
            
            $workbench.reset();

            window.vm = new Vue({
                el: '#app',
                data: {
                    projectDropDownList: [],
                    componentList: [],
                    componentMap: {},
                    currentproject: localStorage.getItem('currentproject'),
                    workbench: $workbench,
                    development: $util.development,
                    user:{},
                    funcList:[],
                },
                watch: {
                    currentproject(newVal, oldVal) {
                        localStorage.setItem("currentproject", this.currentproject)
                        $rest.load$pinfo(this.currentproject);
                        $workbench.reset();
                    }
                },
                methods: {
                    handleMenuClick: handleMenuClick,
                    handleTabRemove(val) {
                        $workbench.closePage(val);
                    },
                    handleIframeLoad(item)
                    {
                      let iframe = document.getElementById(item.url);
                      if(iframe && iframe.contentWindow && iframe.contentWindow.document && iframe.contentWindow.document.body)
                      {
                          let height = iframe.contentWindow.document.body.scrollHeight;
                          iframe.height = height>800?height:800;
                      };
                    },
                    handleFuncOperate:function(func)
                    {
                        $workbench.openPage(func);
                    },
                    handleUserOperate:function (cmd)
                    {
                        let self = this;
                        switch(cmd)
                        {
                            case 'logout':
                                self.$confirm('退出登录后将不再能继续访问此服务, 是否继续?', '提示', {
                                    cancelButtonText: '取消',
                                    confirmButtonText: '确定',
                                    type: 'warning',
                                    center: true
                                }).then(
                                    () => {
                                        $rest.getdata('/admin/logout',function(data){
                                            $util.forwardToLogin()
                                        })
                                    }
                                ).catch(
                                    () => {}
                                );
                                break;
                            case 'changePwd':
                                $util.forward('/admin/changePwd.htm')
                                break;
                            case 'login':
                                $util.forwardToLogin()
                                break;
                        };
                    }
                }
            });
            
            $rest.getdata('/admin/user',function(user){
                vm.user=user;
                if(!user.id)
                {
                    $util.forwardToLogin()
                    return;
                };
                
                $rest.projectList(function(projectList){
                    vm.projectDropDownList = projectList
                    
                    $rest.getdata('/manage/funcList',function(funcList){vm.funcList=funcList});
                    $rest.check$configOrLoad(
                        function(config) {
                            vm.componentList = $config.componentList;
                        }
                    );
                    
                    let finded = projectList.find(it=>it.rpath===vm.currentproject);
                    if(!finded) {
                        vm.currentproject = projectList.length ? projectList[0].rpath : '';
                    }
                    
                    $rest.load$pinfo(vm.currentproject);
                });
            });
            
        </script>
    </body>

</html>
